<script>
// import { mailList, menu } from '@/config/menu.js'
import { menu, folderIdMap } from "@/config/menu.js";
import { mapGetters, mapMutations } from "vuex";
import Skeleton from "@/components/Skeleton.vue";
import TreeNav from "@/components/TreeNav.vue";
import TreeNavItem from "./TreeNavItem.vue";
import {
  sortMenuInOrder,
  // sortMenuInOrderEnglish
} from "@/config/menu.js";
export default {
  name: "Menuset",
  components: {
    Skeleton,
    TreeNav,
  },
  props: {},
  data() {
    return {
      isOpen: false,
      activeNames: ["3"],
      inboxCount: 0,
      // otherCount: 0,
      // count: {
      //   all: undefined,
      // },
      isLoading: false,
      folderIdMap: folderIdMap,
      //   tree: [
      //     {
      //       name: "一层文件夹",
      //       subTree: [
      //         {
      //           name: "二层",
      //           subTree: [
      //             {
      //               name: "三层",
      //               subTree: [],
      //             },
      //             {
      //               name: "三层兄弟",
      //               subTree: [],
      //             },
      //           ],
      //         },
      //       ],
      //     },
      // {
      //   name: "一层文件夹兄弟",
      //   subTree: [],
      // },
      //   ],
      folderTree: [],
      inboxChildFolder: [],
      inboxChildFolderCount: 0,
      sortMenuInOrder: sortMenuInOrder, //中英文文件夹排序处理
    };
  },
  computed: {
    ...mapGetters(["mailType", "folderInfo"]),
  },
  created() {
    this.getCountInfo(); //eventBus监听
    this.getCurrentFolderInfo(); //调用后台
    this.getCurrentFolder(); //eventBus监听
  },
  watch: {},
  methods: {
    ...mapMutations(["SAVEMAILTYPE", "SAVEFOLDERINFO"]),
    toggleTree() {
      this.isOpen = !this.isOpen;
      this.getChildFolder();
    },
    getCountInfo() {
      this.$eventBus.$on("getCountInfo", (msg) => {
        // if (this.folderInfo.folderId === "inbox") {
        this.inboxCount = msg;
        // } else {
        // this.otherCount = msg;
        // }
      });
    },
    sortFolderInSpecifiedOrder(folderTree) {
      this.$nextTick(() => {
        let priorityArr = [];
        for (let i = 0; i < this.sortMenuInOrder.length; i++) {
          for (let j = 0; j < folderTree.length; j++) {
            if (this.sortMenuInOrder[i] === folderTree[j].displayName) {
              priorityArr.push(folderTree[j]);
            }
          }
        }
        // console.warn('priorityArr:',priorityArr)
        const priorityIds = priorityArr.map((item) => item.id);
        // console.warn('priorityIds:::',priorityIds)
        const set = new Set([...priorityIds]);
        let leftArr = [];
        folderTree.map((item) => {
          if (!set.has(item.id)) {
            leftArr.push(item);
          }
        });
        // console.warn('leftArr,',leftArr)
        let finalArr = [...priorityArr, ...leftArr];
        finalArr.splice(0, 1);
        this.folderTree = [...finalArr];
      });
    },
    async getCurrentFolderInfo() {
      try {
        const res = await this.Api.listCurrentFolder();
        this.$toast.clear()
        const { success, data } = res?.data;
        if (success) {
          // console.warn("data", data);
          this.folderTree = data;
          console.log(this.folderTree);
          const index = data.findIndex(item =>{
            return item.displayName === this.$lang.inbox 
          })
          this.folderTree.splice(index,1)
          const inboxData = data.find(
            (item) => item.displayName === this.$lang.inbox
          );
          // console.warn('inboxDta',inboxData)
          this.inboxChildFolderCount = inboxData.childFolderCount;
          // console.warn('inboxChildFolderCount',this.inboxChildFolderCount)
          // this.sortFolderInSpecifiedOrder(folderTree);
        }
      } catch(error) {
        console.log("获取当前文件夹失败");
      }
    },
    getCurrentFolder() {
      this.$eventBus.$on("getCurrentFolder", this.getCurrentFolderInfo);
    },
    async getChildFolder() {
      try {
        const res = await this.Api.listChildFolder("inbox");
        const { success, data } = res?.data;
        if (success) {
          this.inboxChildFolder = data.length ? data : {};
        }
      } catch {
        console.error("获取收件箱子文件夹失败");
      }
    },
    getCount(type) {
      if (type === "all") {
        return this.inboxCount > 0 ? this.inboxCount : "";
      } else {
        // return this.otherCount>0 ? this.otherCount : '';
        return "";
      }
    },
  },
  // eslint-disable-next-line no-unused-vars
  render(h) {
    return (
      <div class="pop-wrapper">
        <div class="menulist-wrapper">
          {menu.map((cell) => (
            <van-cell
              value={this.getCount(cell.type)}
              onClick={() => {
                this.SAVEMAILTYPE(cell.type);
                this.SAVEFOLDERINFO({
                  type: cell.type,
                  folderId: this.folderIdMap[cell.type],
                  customName: cell.type,
                });
                localStorage.setItem("isType",this.folderIdMap[cell.type])
                this.$emit("toggleDropdownMenu");
              }}
              class="cell-item"
            >
              <template slot="title">
                <img class="menu-icon" src={cell.icon} />

                <span
                  class={
                    cell.type === this.mailType
                      ? "custom-title selected"
                      : "custom-title"
                  }
                >
                  {cell.title}
                </span>
              </template>
            </van-cell>
          ))}
        </div>
        <p class="fileText">{this.$lang.myFolder}</p>
        <div class="myFolder">
          <div class="inboxTitle-wrapper">
            <div
              class="left-side"
              onClick={() => {
                this.SAVEMAILTYPE("all");
                this.SAVEFOLDERINFO({
                  type: "all",
                  folderId: "inbox",
                  customName: "all",
                });
                this.$emit("toggleDropdownMenu");
              }}
            >
              <img class="icon" src={require("@/assets/oppo/home/all.svg")} />
              <p>{this.$lang.inbox}</p>
            </div>

            <div class="right-side">
              <p class="unreadCount">
                {this.inboxCount === 0 ? "" : this.inboxCount}
              </p>
              <div
                class="right-icon-wraper"
                v-show={this.inboxChildFolderCount > 0}
                onClick={() => {
                  this.toggleTree();
                }}
              >
                <img
                  class="right-icon"
                  src={
                    this.isOpen
                      ? require("@/assets/oppo/home/list-arrow-up.svg")
                      : require("@/assets/oppo/home/list-arrow-down.svg")
                  }
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="inboxSubFolder" v-show={this.isOpen}>
            {this.inboxChildFolder.map((item) => (
              <TreeNavItem treeData={item}></TreeNavItem>
            ))}
          </div>
        </div>
        <div class="folderTree">
          {<TreeNav treeData={this.folderTree}></TreeNav>}
        </div>
      </div>
    );
  },
};
</script>

<style lang="less" scoped>
.pop-wrapper {
  height: 100%;
  width: 100%;
  font-size: 16px;
  padding: 0 20px 0px 16px;
  // overflow-y: auto;
  .menu-icon {
    margin-right: 12px;
  }
  .cell-item {
    line-height: 56px;
    padding: 0;
  }
  /deep/ .van-collapse-item__content {
    padding: 0;
    .custom-title {
      padding-left: 10px;
    }
  }
  /deep/ .van-cell__title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    img{
      pointer-events: none;
    }
  }

  /deep/ .van-cell::after {
    content: none;
  }

  p {
    line-height: 56px;
  }
  .fileText {
    font-size: 18px;
    text-align: left;
    line-height: 56px;
    font-weight: 600;
  }
  .myFolder {
    display: flex;
    flex-direction: column;

    .inboxTitle-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .left-side {
        display: flex;
        width: 90%;
        img {
          margin-right: 12px;
          pointer-events: none;
        }
      }
      .right-side {
        display: flex;
        align-items: center;
        .unreadCount {
          font-size: 14px;
          color: #969799;
          font-weight: 400;
          margin-right: 8px;
        }
        .right-icon-wraper {
          line-height: 56px;
          img{
            pointer-events: none;
          }
        }
      }
    }
    .inboxSubFolder {
      padding-left: 1rem;
    }
  }

  .folderTree {
    padding-bottom: 100px;
  }
}
</style>
